<template>
	<view class="page">
		<view class="course-up">
			<image class="course-banner" :src="briefInfo.banner"></image>
			<view class="course-name">
				<view class="name">{{briefInfo.courseName}}</view>
				<view class="course-name-right">已学:{{briefInfo.per}}%</view>
			</view>
		</view>
		<view class="tabs">
			<tab :tabs="tabs" :activeIndex="activeIndex" @tabChange='tabChange'></tab>
		</view>

		<swiper class="tab-content" :current="activeIndex" @change='swiperChange'>
			<swiper-item class="tab-content-item">
				<brief :activeIndex="activeIndex" :content="briefContent" :outlineUrl="briefInfo.structure_url" ref='brief'></brief>
			</swiper-item>
			<swiper-item class="tab-content-item">
				<catalog :activeIndex="activeIndex" :catalogList="catalogList"></catalog>
			</swiper-item>
			<swiper-item class="tab-content-item">
				<homework @updateIndex='updateIndex' :activeIndex="activeIndex" :homeworkList="homeworkList" @showDialog='openDialog'></homework>
			</swiper-item>
			<swiper-item class="tab-content-item">
				<comment :activeIndex="activeIndex" :commentList="commentList"></comment>
			</swiper-item>
		</swiper>

		<round-dialog v-if="showDialog" @close="closeDialog" :publishTime="publishTime"></round-dialog>
	</view>
</template>

<script>
	import roundDialog from './fragment/roundDialog.vue'
	import tab from './fragment/tab.vue'
	import brief from './fragment/brief.vue'
	import catalog from './fragment/catalog.vue'
	import homework from './fragment/homework.vue'
	import comment from './fragment/comment.vue'
	import {
		isEmpty,
		showToast,
		adjustRichImg
	} from '@/utils/index.js'
	import CourseService from '@/services/course.js'
	const courseService = new CourseService();
	export default {
		components: {
			tab,
			brief,
			catalog,
			homework,
			comment,
			roundDialog
		},
		data() {
			return {
				showDialog: false,
				courseId: null,
				activeIndex: -1,
				clickIndex: {},
				tabs: ['简介', '目录', '作业', '讨论'],
				briefInfo: {},
				briefContent:'',
				catalogList: [],
				homeworkList: [],
				commentList: []
			};
		},
		onLoad(query) {
			this.courseId = query.courseId;
			this.activeIndex = 0;
			uni.$on('updateHomeworkState', (payload) => {
				this.updateHomeworkState(payload)
			});
			uni.$on('refreshCourse',()=>{
				console.log('===refreshCourse')
				this.refresh(this.activeIndex)
			})
		},
		onUnload() {
			uni.$off('updateHomeworkState')
			uni.$off('refreshCourse')
		},
		//监听页面返回，如果正在下载课程大纲，弹窗提示
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			if (!this.$refs.brief.downloading) {
				return false;
			}
			uni.showModal({
				title: '',
				content: '正在下载文件，返回将取消下载，确认返回？',
				success: (res) => {
					if (res.confirm) { //确定返回，终止下载任务，并返回
						this.$refs.brief.abort();
						uni.navigateBack()
					}
				}
			})
			return true
		},
		watch: {
			activeIndex(newValue, oldValue) {
				this.refresh(newValue)
			}
		},
	
		methods: {
			//刷新当前tab
			refresh(value){
				switch (value) {
					case 0:
						this.loadBriefInfo()
						break;
					case 1:
						this.loadCatalogList()
						break;
					case 2:
						this.loadHomeworkList()
						break;
					case 3:
						this.loadCommentList()
						break;
					default:
						break;
				}
			},
			updateIndex(indexInfo) {
				this.clickIndex = indexInfo
			},
			updateHomeworkState(payload) {
				const index = this.clickIndex.index;
				const secondIndex = this.clickIndex.secondIndex;
				const thirdIndex = this.clickIndex.thirdIndex;
				if (isEmpty(thirdIndex)) {
					const item = this.homeworkList[index].children[secondIndex];
					item.status = payload.status;
					item.publishTime = payload.publishTime
				} else {
					const item = this.homeworkList[index].children[secondIndex].children[thirdIndex];
					item.status = payload.status;
					item.publishTime = payload.publishTime
				}
			},
			swiperChange(event) {
				this.activeIndex = event.detail.current
			},
			tabChange(index) {
				this.activeIndex = index
			},
			openDialog(time) {
				this.publishTime = time;
				this.showDialog = true;
			},
			closeDialog() {
				this.showDialog = false;
			},
			//获取简介信息
			loadBriefInfo() {
				console.log('---',courseService)
				if (!isEmpty(this.briefInfo)) {
					return;
				}
				const params = {
					courseId: this.courseId
				}
				courseService.courseInfo(params).then(res => {
					if (res.success) {
						this.briefInfo = res.result
						this.briefContent = adjustRichImg(res.result.desc)
						} else {
						showToast('请求失败')
					}
				})
			},
			//获取目录列表
			loadCatalogList() {
				if (!isEmpty(this.catalogList)) {
					return;
				}
				const params = {
					courseId: this.courseId
				}
				courseService.catalogList(params).then(res => {
					if (res.success) {
						this.catalogList = res.result
					} else {
						showToast('请求失败')
					}
				})
			},
			// 获取作业列表
			loadHomeworkList() {
				if (!isEmpty(this.homeworkList)) {
					return;
				}
				const params = {
					courseId: this.courseId
				}
				courseService.homeworkList(params).then(res => {
					if (res.success) {
						this.homeworkList = res.result
					} else {
						showToast('请求失败')
					}
				})
			},
			//获取讨论列表
			loadCommentList() {
				// if (!isEmpty(this.commentList)) {
				// 	return;
				// }
				const params = {
					courseId: this.courseId
				}
				courseService.commentList(params).then(res => {
					if (res.success) {
						this.commentList = res.result
					} else {
						showToast('请求失败')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F1F1F1;
	}

	.course-up {
		background-color: #FFFFFF;
		position: relative;
	}

	.course-banner {
		width: 100%;
		height: 438upx;
		vertical-align: top;
	}

	.course-name {
		display: flex;
		justify-content: space-between;
		height: 74upx;
		line-height: 74upx;
		font-size: 26upx;
		color: #fff;
		padding: 0 20upx;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0,0,0,.5);
		
		.name {
			font-size: 34upx;
		}
		
		&-right {
			font-size: 20upx;
			color: #fff;
		}
	}

	.tabs {
		background-color: #FFFFFF;
		margin-top: 20upx;
		border-bottom: 1upx solid #f1f1f1;
	}

	.tab-content {
		background-color: #FFFFFF;
		padding: 0 20upx;
		height: calc(100vh - 628upx);

		&-item {
			overflow-y: scroll;
		}
	}
</style>
